import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/ui/pay_pwd.dart';
import 'package:meal/ui/scroll_refresh_config.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class BankCardManage extends StatefulWidget {
  const BankCardManage({Key? key}) : super(key: key);

  @override
  State<BankCardManage> createState() => _BankCardManageState();
}

class _BankCardManageState extends State<BankCardManage> {
  final RefreshController refreshController = RefreshController(initialRefresh: false);

  final List<_BankCard> pageList = [];

  String pwd = '';

  @override
  void initState() {
    super.initState();
    pageList.add(_BankCard(
        bankName: '工商银行',
        cardNo: '**** **** **55 12',
        icon: 'https://cdn7.axureshop.com/demo/1525603/images/银行卡管理/u2363.svg'));
    pageList.add(_BankCard(
        bankName: '建设银行',
        cardNo: '**** **** **55 12',
        icon: 'https://cdn7.axureshop.com/demo/1525603/images/银行卡管理/u2363.svg'));
    pageList.add(_BankCard(
        bankName: '中国银行',
        cardNo: '**** **** **55 12',
        icon: 'https://cdn7.axureshop.com/demo/1525603/images/银行卡管理/u2363.svg'));
    pageList.add(_BankCard(
        bankName: '农业银行',
        cardNo: '**** **** **55 12',
        icon: 'https://cdn7.axureshop.com/demo/1525603/images/银行卡管理/u2363.svg'));
  }

  @override
  void dispose() {
    refreshController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar(
        '银行卡管理',
        actions: ToolsUtils.actions('添加银行卡', pressed: () {
          Get.toNamed(RouteGet.financeBankCardAdd);
        }),
      ),
      body: ScrollRefreshConfig(
        refreshController: refreshController,
        onRefresh: onRefresh,
        onLoading: onLoading,
        child: listViewBuilder(),
      ),
    );
  }

  Widget listViewBuilder() {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        var item = pageList[index];
        return Container(
          margin: const EdgeInsets.only(
              top: Sizes.default20, left: Sizes.default20, right: Sizes.default20),
          padding:
              const EdgeInsets.symmetric(vertical: Sizes.default10, horizontal: Sizes.default15),
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: Sizes.default40,
                alignment: Alignment.centerLeft,
                child: ToolsUtils.getUrlSvg(item.icon, width: 30, height: 20),
              ),
              Expanded(
                  child: Container(
                padding: const EdgeInsets.only(left: Sizes.default10),
                child: Column(
                  children: [
                    Container(
                      height: Sizes.default40,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        item.bankName,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color333, fontSize: Sizes.default16),
                      ),
                    ),
                    Container(
                      height: Sizes.default40,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        item.cardNo,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color333, fontSize: Sizes.default16),
                      ),
                    ),
                    Container(
                      height: Sizes.default40,
                      alignment: Alignment.centerRight,
                      child: TextButton(
                          onPressed: () {
                            onSubmit(index);
                          },
                          child: Container(
                            constraints: const BoxConstraints.expand(width: 50, height: 25),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                border: Border.all(
                                  color: ColorsUtils.rgba(255, 110, 83, 1),
                                ),
                                borderRadius: BorderRadius.circular(Sizes.default5)),
                            child: Text(
                              '解绑',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default13, color: ColorsUtils.colorFf6),
                            ),
                          )),
                    )
                  ],
                ),
              ))
            ],
          ),
        );
      },
      itemCount: pageList.length,
    );
  }

  void onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
    setState(() {});
  }

  void onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 10) {
      return refreshController.loadNoData();
    }

    /// 添加订单
    refreshController.loadComplete();
    pageList.add(_BankCard(
        bankName: '招商银行',
        cardNo: '**** **** **55 12',
        icon: 'https://cdn7.axureshop.com/demo/1525603/images/银行卡管理/u2363.svg'));
    setState(() {});
  }

  void onSubmit(int index) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (_) {
          return StatefulBuilder(builder: (BuildContext context, setState) {
            return PayPwd(
                pwd: pwd,
                title: '解绑银行卡',
                subTitle: '请输入交易密码，以验证身份',
                callback: (String value) {
                  setState(() {
                    if (value.length == 6) {
                      /// 删除
                      Future.delayed(const Duration(milliseconds: 20), () {
                        Navigator.of(context).pop();
                        pwd = '';
                        pageList.removeAt(index);
                      });
                    } else {
                      pwd = value;
                    }
                  });
                });
          });
        });
  }
}

class _BankCard {
  String icon;
  String bankName;
  String cardNo;

  _BankCard({required this.icon, required this.bankName, required this.cardNo});
}
